import { FC } from "react";
import "./QuestionCard.css";

type PropsType = {
  id: string;
  title: string;
  isPublished: boolean;
  deleteQuestion?: (id: string) => void;
  publishQuestion?: (id: string) => void;
};

const QuestionCard: FC<PropsType> = (props) => {
  const { id, title, isPublished, deleteQuestion, publishQuestion } = props;
  function publish(id: string) {
    publishQuestion && publishQuestion(id);
  }
  function del(id: string) {
    deleteQuestion && deleteQuestion(id);
  }
  return (
    <div key={id} className="list-item">
      <strong>{title}</strong>
      &nbsp;
      {isPublished ? (
        <span style={{ color: "green" }}>已发布</span>
      ) : (
        <span>未发布</span>
      )}
      &nbsp;
      <button onClick={() => del(id)}>删除</button>
      <button onClick={() => publish(id)}>发布</button>
      {/* <button onClick={() => togglePublish(id)}>
        {isPublished ? "取消发布" : "发布"}
      </button>
      <button onClick={() => toggleStar(id)}>
        {isStar ? "取消收藏" : "收藏"}
      </button>
      <button onClick={() => toggleLike(id)}>
        {isLike ? "取消点赞" : "点赞"}
      </button> */}
    </div>
  );
};

export default QuestionCard;
